/* css Reset */
*{
     margin: 0px;
     padding: 0px;
} 
body{

     position: relative;
}
/* This is the header */
header{
     background-color: rgb(11, 22, 11, .25);
     display:flex;
     align-items: center;
     width: 100%;
     position: fixed;
     top: 0;
     
     /* border: 2px solid white; */
     

}
/* This is the left side of header  */
#left{ 
     width: 20%;
     /* border: 2px solid #ff8052 ; */

}
/* This is the logo */
#logo{ 
     width: 50%; 
     margin: 10% 25% 10% 25%;
     transition: transform 1s ease-in-out;
     
}
#logo:hover{
     transform: scale(1.5);
     /* transform: rotate(360deg); */
}

/* This is the mid part of header  */
#mid{
     width: 60%;
     /* border: 2px solid #ff8052 ; */

}
#navbar{
     display: flex;
     box-sizing: border-box;
     justify-content: center;
     
}
#navbar li {
     list-style: none;
     border-radius: 50px;
    transition: background-color 1s ease-out;
     
}
#navbar li:hover{
     background-color: rgba(233, 225, 225, 0.4);
}

#navbar li a{
     display: block;
     text-decoration: none;
     font-family: 'Rajdhani', sans-serif ;
     font-size: 1.4vw;
     letter-spacing: 2px;
     color: rgb(255, 255, 255);
     margin: 10px;

}

/* This is the right side of header  */
#right{
     width:20%;
 
}
#search{
     background-color: #f58d38;
     width: 50%;
     margin: auto;
     border-radius: 50px;
     transition: width 1s ease-in-out;
}
#search:hover{
     width: 70%;

}

#search a{
     display: block;
     font-family:'Rajdhani', sans-serif ;
     font-size: 1vw;
     letter-spacing: 2px;
     color: rgb(250, 246, 246);
     padding: 10px;
     text-align: center;
     text-decoration: none;     
}
#search input{
     display: none;
     padding: 10px;
     border: 4px solid #ff8052 ;
     border-radius: 20px;
     text-align: center;
     width: 100%;
     color: #141414f6;
     background-color: white;
     background-image: url(img/search\ icon.png );
     background-position: 10px 10px; 
     background-repeat: no-repeat;
     background-size: 1.2vw;
     font-family: 'Rajdhani', sans-serif;
}
#search:hover input{
     display: block;   
}

#search:hover a{
     display: none;
}
#background{
     background-color: #ffe4c4;
     border: 1px solid #ffe4c4;

}
#text {
     padding: 12% 0% 0% 10%;
     font-size: 3vw;
     font-family:'Rajdhani', sans-serif;
     color: #643a09;
     letter-spacing: .3vw;
    
}
#sub-content{
     display: flex;
     margin: 1% 10% 10% 10%;
     border-radius: 10px;
     overflow: hidden;
     font-size: 1.8vw;
     font-family:'Rajdhani', sans-serif;
     color: #91764de8;
     background: rgba(241, 239, 234, 0.521);
     
}
#sub-content p{
     width: 75%;
     padding: 3%;
}
#sub-content img{
     width: 25%;

}
footer{
     display :flex;
     background-color: rgba(182, 109, 25, 0.384);
     font-family: 'Rajdhani', sans-serif ;
     font-size: 1.6vw;
     letter-spacing: 2px;
     color: rgb(250, 246, 246);
     padding: 8% 0;
     justify-content: space-around;

}
.footeritem {
     margin-bottom: 10px;
     transition: color .2s ease-out;
     
}
.footeritem:hover{
   
     color: #91764de8;
}